<template>
  <div class="itemOne">
    <h5>感染流感人数(单位:人次)</h5>
    <div id="oneCharts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted, reactive } from 'vue'

import { itemOne } from '../../../api/echart'
export default {
  name: 'ItemOne',
  setup() {

    let data = reactive({})
    let xdata = reactive([])
    let ydata = reactive([])
    function setData() {
      xdata = data.map(item => item.title)
      ydata = data.map(item => item.num)
      console.log(xdata, ydata)
    }

    let colors = [
      '#5470c6',
      '#91cc75',
      '#fac858',
      '#ee6666',
      '#73c0de',
      '#3ba272',
      '#37A2DA',
      '#32C5E9',
      '#67E0E3',
      '#9FE6B8',
      '#FFDB5C',
      '#ff9f7f',
      '#fb7293',
      '#E062AE',
      '#E690D1',
      '#e7bcf3',
      '#9d96f5',
      '#8378EA',
      '#96BFFF'
    ]

    async function getState() {
      await itemOne().then(res => {
        data = res
      })
    }

    onMounted(() => {
      let myChart = echarts.init(document.getElementById('oneCharts'));

      getState().then(() => {
        setData()

        myChart.setOption({
          tooltip: {
            trigger: 'item',
            axisPointer: {
              type: 'item',
              label: {
                backgroundColor: '#e6b600'
              }
            }
          },
          grid: {
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'category',
            data: xdata,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          series: [
            {
              data: ydata,
              type: 'bar',
              itemStyle: {
                normal: {
                  barBorderRadius: [0, 20, 20, 0],
                  color: params => colors[params.dataIndex] || '#fac858',
                }
              }
            }
          ]
        })
      })
    })

    return {
      getState, data, xdata, ydata, setData, colors
    }
  }
}
</script>

<style lang="less" scoped>
.itemOne {
  color: #ffffff;
}

#oneCharts {
  height: 350px;
  margin-left: -15px;
  margin-top: -65px;
  color: #fff;
}

h5 {
  color: #fff;
  text-align: center;
}
</style>
